import React from 'react';
import { observer } from '@formily/react';
import { DnFC, useNodeIdProps, usePlugin, DroppableWidget } from '@inbiz/react';
import { createBehavior, createResource, TreeNode } from '@inbiz/core';
import { VerticalMenu as Content, Plugin as MenuPlugin } from '../../preview/web';
import { defaultResource, defaultBehavior, pluginSchema } from '../schema';
import { Plugin } from '../../../InbizMenu/designer/locale';

export const VerticalMenu: DnFC<React.ComponentProps<any>> & {
  Plugin: React.ComponentProps<any>;
} = (props) => {
  const nodeId = useNodeIdProps();
  const plugin = usePlugin('VerticalMenu.Plugin');

  return (
    <div {...nodeId}>
      <Content {...props} plugin={plugin} />
    </div>
  );
};

VerticalMenu.Plugin = observer((props) => {
  return (
    <DroppableWidget
      style={{
        width: '100%',
        ...props['style'],
      }}
      height={'100%'}
    >
      <MenuPlugin {...props}>{props.children}</MenuPlugin>
    </DroppableWidget>
  );
});

const allowDrops = ['Message', 'PersonalInfo', 'Html'];

VerticalMenu.Behavior = createBehavior(defaultBehavior, {
  name: 'VerticalMenu.Plugin',
  selector: (node) => (node.props ? node.props['x-component'] === 'VerticalMenu.Plugin' : false),
  extends: ['Field'],
  designerProps: {
    draggable: false,
    cloneable: false,
    deletable: false,
    droppable: true,
    propsSchema: pluginSchema,
    // allowAppend: (target: TreeNode, sources?: TreeNode[]) => {
    //   const isAppend = allowDrops.includes(sources[0].props['x-component']);
    //   return isAppend;
    // },
    allowDrop: (node) => false,
  },
  designerLocales: Plugin,
});

VerticalMenu.Resource = createResource(defaultResource);

export default VerticalMenu